<template>
  <Modal
    width="800"
    class="modal-tips"
    v-model="config"
    @on-cancel="cancel"
    :mask-closable="false"
    footer-hide
    title="选择模板"
  >
    <div style="position: relative; margin-top: 10px">
      <Spin :withIcon="true" v-if="selectLoading"></Spin>
      <div class="b-b-d flx-row-s-c main-padding">
        <span class="f-14 c-black">模板名称：</span>
        <Input
          v-model.trim="name"
          placeholder="请输入"
          maxlength="30"
          style="width: 150px"
          @on-enter="pageChange(1)"
        />
        <div
          class="user-strong-button small-code-button"
          style="margin: 0 10px 0 30px"
          @click="pageChange(1)"
        >
          搜索
        </div>
        <div class="user-normal-button small-code-button" @click="reset">
          重置
        </div>
      </div>
      <div class="main-area b-b-d" ref="scrollArea">
        <RadioGroup
          class="w-p-100"
          v-model="selectId"
          v-if="myTemplateList != null && myTemplateList.length > 0"
          @on-change="selectItem"
        >
          <table class="order-table-area">
            <tbody>
              <tr
                v-for="(item, index) in myTemplateList"
                :key="'t' + item.id"
                :class="[(index + 1) % 2 != 0 ? 'lc-f' : 'lc-F9FAFB']"
              >
                <td>
                  <div class="line-style">
                    <Radio
                      :label="item.id"
                      class="flx-row-s-c"
                      style="display: flex"
                    >
                      <span
                        class="normal-f f-ell-sin"
                        style="
                          white-space: nowrap;
                          text-overflow: ellipsis;
                          overflow: hidden;
                          max-width: 200px;
                        "
                        :title="item.name"
                        >{{ item.name }}</span
                      >
                    </Radio>
                  </div>
                </td>
                <td>
                  <div class="line-style">
                    <span class="c-black">{{
                      item.type == 0 ? "个人" : "企业"
                    }}</span>
                  </div>
                </td>
                <td>
                  <div class="line-style">
                    <span
                      class="normal-f f-ell-sin"
                      :title="
                        item.type == 0 ? item.locName : item.locBusinessName
                      "
                      >{{
                        item.type == 0 ? item.locName : item.locBusinessName
                      }}</span
                    >
                  </div>
                </td>
                <td>
                  <div class="line-style">
                    <span class="c-black">已实名认证</span>
                  </div>
                </td>
                <td>
                  <div class="line-style">
                    <div
                      class="o-form-font-button"
                      style="margin-right: 10px"
                      @click="showTemplateDetailModal(item)"
                    >
                      查看
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </RadioGroup>
        <template-detail-modal
          :show.sync="templateDetailModalShow"
          :info="templateDetailInfo"
        ></template-detail-modal>
        <Empty-State
          :noPadding="true"
          style="background-color: #fff; padding: 30px"
          v-if="myTemplateList != null && myTemplateList.length <= 0"
          content="未搜索到任何内容！"
        ></Empty-State>
      </div>
      <div class="flx-row-bw-c main-padding">
        <Page
          :total="tTotal"
          :current="page"
          :page-size="pageSize"
          @on-change="pageChange"
          show-elevator
          show-total
        />
        <div class="user-strong-button submit-button-style" @click="submit">
          确认
        </div>
      </div>
    </div>
  </Modal>
</template>

<script>
import { getTemplateSelectList } from "@/api/user";
export default {
  components: {
    templateDetailModal: () =>
      import("_c/modal/templateDetailModal/templateDetailModal.vue"),
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    tSelect: {
      default: null,
    },
  },
  data() {
    return {
      selectLoading: false,
      myTemplateList: null,
      selectId: null,
      selectName: "",

      templateDetailModalShow: false,
      templateDetailInfo: null,

      // 模板分页设置
      name: "",
      tTotal: null,
      pageSize: 10,
      page: 1,
    };
  },
  watch: {
    show: {
      immediate: true,
      handler(newValue) {
        if (newValue && (this.name != "" || this.page != 1)) {
          this.reset();
        }
      },
    },
    tSelect: {
      handler(newValue) {
        if (newValue && newValue != this.selectId) {
          this.selectId = newValue;
        }
      },
    },
  },
  created() {
    this.getTemplateSelectList();
  },
  methods: {
    submit() {
      if (this.selectId == null) {
        this.$Message.warning("请选择模板！");
        return;
      }
      if (this.selectId != this.tSelect) {
        this.$emit("check-submit", this.selectId, this.selectName);
      }
      this.config = false;
    },
    cancel() {
      this.config = false;
    },
    // 获取我的模板列表
    async getTemplateSelectList() {
      this.selectLoading = true;
      let params = {
        page: this.page,
        limit: this.pageSize,
      };
      if (this.name) {
        params.name = this.name;
      }
      let res = await getTemplateSelectList(params);
      if (res.code == 200) {
        if (this.$refs.scrollArea) {
          this.$refs.scrollArea.scrollTop = 0;
        }
        if (!this.selectId && this.page == 1 && res.data.list.length > 0) {
          this.selectId = res.data.list[0].id;
          this.selectName = res.data.list[0].name;
        }
        this.myTemplateList = res.data.list;
        this.tTotal = res.data.total;
      }
      this.selectLoading = false;
    },
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getTemplateSelectList();
    },
    // 重置
    reset() {
      this.name = "";
      this.page = 1;
      this.getTemplateSelectList();
    },
    // 展示模板
    showTemplateDetailModal(item) {
      this.templateDetailInfo = item;
      this.templateDetailModalShow = true;
    },
    // 选择模板
    selectItem(item) {
      this.selectId = item;
      let temp = this.myTemplateList.filter((i) => i.id == item);
      this.selectName = temp[0].name;
    },
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.main-padding {
  padding: 15px 20px;
}
.main-area {
  padding: 15px 20px;
  max-height: 420px;
  overflow-y: auto;

  .order-table-area {
    width: 100%;
    table-layout: auto;
    box-sizing: border-box;

    .line-style {
      min-height: 50px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0 10px;
    }

    .b-b {
      border-bottom: 1px solid #dcdcdc;
    }
  }
}
.line-button {
  @include h-c(null, null, #3d3d3d, $mainColor);
  cursor: pointer;
}
</style>
